<template>
	<view>
		<view class="card tn-padding-sm tn-margin-sm">
			<tn-form :model="form" ref="form" :labelWidth="180" :errorType="['message', 'toast']">
				<tn-form-item label="时间：" prop="createTime1">
				  <uni-datetime-picker :clearIcon="false" :border="false" placeholder="请选择时间"
									   v-model="form.createTime1" />
				</tn-form-item>
				<tn-form-item label="拖至目的地：" prop="dragAddress">
					<tn-input v-model="form.dragAddress" />
				</tn-form-item>
				<tn-form-item label="救援单位：" prop="partyB">
					<tn-input v-model="form.partyB" />
				</tn-form-item>
				<tn-form-item label="司乘人员签字：" prop="partyaSign">
					<image class="signImg" @click="jupmSign('partyaSign')" :src="form.partyaSign" mode=""></image>
				</tn-form-item>
				<tn-form-item label="救援人员：" prop="partybSign">
					<image class="signImg" @click="jupmSign('partybSign')" :src="form.partybSign" mode=""></image>
				</tn-form-item>
				<view class="tn-flex tn-flex-row-center tn-padding-xl">
				  <tn-button @click="submit" backgroundColor="tn-bg-blue" style="width: 80%" fontColor="tn-color-white">保存
				  </tn-button>
				</view>
			</tn-form>
		</view>
		<tn-modal v-model="erweima" :custom="true">
			<view class="custom-modal-content tn-flex tn-flex-direction-column tn-flex-col-center">
				<p style="margin-bottom: 8px;">服务协议</p>

				<canvas id="qrcode" canvas-id="qrcode" style="width: 200px; height: 200px;"></canvas>
				<tn-button @click="downloadPDFFn" backgroundColor="tn-bg-blue" style="width: 80%;margin-top: 16px;" fontColor="tn-color-white">
					下载PDF
				</tn-button>
			</view>
		</tn-modal>
	</view>
</template>

<script>
import UQRCode from '@/node_modules/uqrcodejs/uqrcode.js';
import { getJyServiceAgreement, addJyServiceAgreement } from '@/api/jyServiceAgreement';
import config from '@/config';
import dayjs from 'dayjs';
import {downPdf, erweimaUrl} from "@/api/exam";
import {saveNextStep} from "@/pages/rescue/add/funtion";

export default {
	data() {
		return {
			erweima: false,
			action: 'http://www.example.com/upload_image',
			fileList: [
				{
					url: 'http://www.example.com/tuniao.jpg'
				}
			],
			dragAddress: '',
			form: {
				createTime1:'',
				dragAddress: '',
				partyaSign: '',
				partyB: '',
				partybSign: ''
			},
			rules: {
				// fashengshijian: [{
				// 	required: true,
				// 	message: '请输入发生时间',
				// 	trigger: ['change'],
				// }],
				// dragAddress: [
				// 	{
				// 		required: true,
				// 		message: '请输入拖至目的地',
				// 		trigger: ['change']
				// 	}
				// ]
			}
		};
	},
	onNavigationBarButtonTap(e) {
    // 08.12 解决卷宗修改车牌，数据不同步问题
		this.submit('pdf');
	},
	onReady() {
		this.$refs.form.setRules(this.rules);
		uni.getStorage({
			key: 'TIANBAOID',
			success: (res) => {
				console.log(res.data);
				if (res.data) {
					this.getList(res.data);
					this.form.jyBaseId = res.data;
				}
			}
		});
	},
	methods: {
		downloadPDFFn() {
			// 创建一个隐藏的 <a> 元素用于下载
			const link = document.createElement('a');
			link.href = downPdf({
        baseId:this.form.jyBaseId,
        typeName: 'service',
        id:this.form.id
      });
			link.download = '服务协议.pdf'; // 设置下载的文件名
			link.style.display = 'none';
			document.body.appendChild(link);
			link.click();
			document.body.removeChild(link);
			uni.showToast({
				title: '下载成功',
				icon: 'success'
			});
		},
		creatImg() {
			// 获取uQRCode实例
			var qr = new UQRCode();
			// 设置二维码内容
			qr.data = erweimaUrl({
        baseId:this.form.jyBaseId,
        typeName: 'service',
        id:undefined
      })
			// 设置二维码大小，必须与canvas设置的宽高一致
			qr.size = 200;
			// 调用制作二维码方法
			qr.make();
			// 获取canvas上下文
			var canvasContext = uni.createCanvasContext('qrcode', this); // 如果是组件，this必须传入
			// 设置uQRCode实例的canvas上下文
			qr.canvasContext = canvasContext;
			// 调用绘制方法将二维码图案绘制到canvas上
			qr.drawCanvas();
		},
		jupmSign(name) {
			uni.navigateTo({
				url: '/pages/signBoard/signBoard?name=' + name,
				events: {
					// 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
					acceptDataFromOpenedPage: (data) => {
						this.form[data.name] = data.data;
					}
				}
			});
		},
		getList(id) {
			getJyServiceAgreement(id).then((res) => {
				if (res.data) {
					this.form = res.data;
					this.dragAddress = true;
				}else{
          this.form.createTime1 =  dayjs().format('YYYY-MM-DD HH:mm:ss')
        }
			});
		},
		submit(type) {
			this.$refs.form.validate((valid) => {
				if (valid) {
					addJyServiceAgreement(this.form).then((res) => {
            saveNextStep(type, res, this)
          });
					console.log('验证通过');
				} else {
					console.log('验证失败');
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.card {
	background-color: #fff;
	box-shadow: 0px 4px 20px 0px rgba(0, 3, 72, 0.1);
	border-radius: 8px;
}
::v-deep{
		.tn-form-item--left__content__label{
			font-weight: 700;
		}
	}
</style>
